html, body {
    height: 100%;
    overflow: hidden;
}
*{
    padding:0;
    margin:0;
    touch-action: none;
}
body{
	font-size: 0;
	background-color: #fec200;
}
li{
	list-style: none;
}
header{
	height:0.65rem;
}
.bg{
	background-image:url(../images/bacs.png) ;
    background-repeat: no-repeat;
    background-size: cover;
    width:100%;
    height:100%;
    position: relative;
}
.bg1{
	background-image:url(../images/bacs1.png) ;
    background-repeat: no-repeat;
    background-size: cover;
    width:100%;
    height:100%;
    position: relative;
}
.bg4{
	background-image:url(../images/bacsn.png) ;
    background-repeat: no-repeat;
    background-size: cover;
    width:100%;
    height:100%;
    position: relative;
}
.logo{
	padding:0.2rem;
}
.logo img{
	width: 0.6rem;
}
.upload{
	position: absolute;
	top:2.05rem;
	left:0.35rem;
}
.upload img{
	width:3.135rem;
}
.up_btn{
	position: absolute;
	top:4.55rem;
	left:0.66rem;
}
.up_btn img{
	width:2.43rem;
}
.up_btn2{
	position: absolute;
	top: 5.28rem;
	left:0.66rem;
	width: 2.43rem;
	height: 0.5rem;
	background: url("../images/up_c.png") no-repeat;
	background-size: cover;
	color: #fff;
	font-style: italic;
	font-weight: bold;
	font-size: 0.16rem;
	line-height: 0.4rem;
	text-align: center;
}
.up_btn2:hover{
	background: url("../images/up_s.png") no-repeat;
	background-size: cover;
}
.up_btn2 a{
	color: #fff;
	text-decoration: none;
	display: block;
}
.upload-file {
    position: absolute;
    left:1.04rem;
    z-index: 100;
    top: 0.6rem;
    width: 1.05rem;
    height: 1.05rem;
    border: none;
    outline: none;
    opacity: 0;
}
.photos{
    position: absolute;
    top: 0.6rem;
    left:1.04rem;
    width: 1.05rem;
    height: 1.05rem;
}
canvas{width: 100%;
	border: 1px solid #000000;
}
.photos li{
    position: relative;
    display: inline-block;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    background: no-repeat center;
    background-size: contain;
}
#upload{
	display: block;
}

.bg3{
	background-image:url(../images/bac3.png) ;
	background-color: #fec200;
    background-repeat: no-repeat;
    background-size: cover;
    width:100%;
    height:100%;
    position: relative;
}
.hb{
	background-image:url(../images/hb.png) ;
    background-repeat: no-repeat;
    background-size: cover;
    width:100%;
    height:100%;
    position: relative;
}
.hc_bg{
	background-image:url(../images/car/dream_car.png) ;
	background-repeat: no-repeat;
    background-size: cover;
    width:3.35rem;
    height:1.675rem;
    position: absolute;
    top:0.31rem;
    left:0.225rem;
}
.hc_bg .tx{
	width:1.31rem;
	height:1.31rem;
	border:0.05rem solid #303030;
	border-radius: 50%;
	position: absolute;
	left:0.1rem;
	top:0.1rem;
	z-index: 1;
}
.hc_bg .car_s{
	width:1.46rem;
	left:1.77rem;
	top:0.2rem;
	position: absolute;
}
.hc_bg p{
	width:2.55rem;
	height:0.43rem;
	background-color: #272727;
	position: absolute;
	right:0;
	bottom:0.1rem;
	text-align: right;
	padding-right: 0.1rem;
}
.hc_bg p span{
	color:#fff;
	font-size: 0.14rem;
	display: block;
}
.hc_bg p span:nth-of-type(2){
	font-weight: bold;
}
.line_bg{
	background-image:url(../images/carbg1.png) ;
	background-repeat: no-repeat;
    background-size: cover;
    width:2.205rem;
    height:2.71rem;
    position: absolute;
    top:2.1rem;
    left:0.67rem;
}
.hbBac{
	background-image:url(../images/carbg2.png) ;
	background-repeat: no-repeat;
    background-size: cover;
    width:3.75rem;
    height:2.71rem;
    position: absolute;
    top:1.75rem;
    left: 0;
}
.line_bg p{
	background-image:url(../images/car/textbg.png) ;
	background-repeat: no-repeat;
    background-size: cover; 
	width:1.815rem;
	height:0.395rem;
	color:#fff;
	font-size: 0.14rem;
	font-weight: bold;
	position: absolute;
	top:0.425rem;
	left:1.05rem;
	text-align: center;
	display: table;
}
.line_bg p span{
	display: table-cell; 
	vertical-align:middle; 
	text-align:center;
}
.line_bg p em{
	display: block; 
}
.carimg{
	position: absolute;
	top:0.6rem;
	left:0.17rem;
}
.hbCar{
	position: absolute;
	top:1rem;
	left:0.84rem;
}
.carimg img{
	width:2.065rem;
}
.carshi{
	position: absolute;
	/*top:4.26rem;*/
	/*left:0.44rem;*/
	top:3.9rem;
	left:0.8rem;
	z-index: 1;
}
.cartext{
	position: absolute;
	right:0.3rem;
	z-index: 1;
	top:4.8rem;
}
.cartext img{
	width:1.0rem;
}
.hbCarshi{
	top: 3.7rem;
	left: 0.6rem;
}
.carshi img{
	/*width:3.095rem;*/
	width: 2.3rem
}
.hbCarshi img{
	/*width:3.095rem;*/
	width: 2.54rem
}
.hbewm{
	width: 0.68rem;
	height: 0.7rem;
	position: absolute;
	right: 0.06rem;
	bottom: 0.4rem;
}
.hbewm img{
	width: 100%;
}
.down{
	position: absolute;
	/*top:6.31rem;*/
	top:5.5rem;
	left:1.74rem;
}
.down img{
	width:0.285rem;
}
/*第6屏*/
.bg2{
	background-image:url(../images/bac2.png) ;
    background-repeat: no-repeat;
    background-size: cover;
    width:100%;
    height:100%;
    position: relative;
}
.share_car{
	position: absolute;
	top:2rem;
}
.share_car img{
	width:3.74rem;
}

.up_btn3{
	position: absolute;
	top: 5.3rem;
	left:0.66rem;
	background: url("../images/up_c.png") no-repeat;
	background-size: cover;
	width:2.43rem;
	height: 0.5rem;
	color: #fff;
	font-style: italic;
	font-weight: bold;
	font-size: 0.16rem;
	line-height: 0.4rem;
	text-align: center;
}
.up_btn3:hover{
	background: url("../images/up_s.png") no-repeat;
	background-size: cover;
}
.up_btn3 a{
	color: #fff;
	text-decoration: none;
	display: block;
}
/*第4屏*/
.fourWrap{
	display: flex;
	flex-direction: column;
	font-weight: bold;
	color: #b89114;
	justify-content: center;
	align-items: center;
	width: 100%;
	position: absolute;
	top: 1.9rem;
}
.sevenWrap{
	top:2.1rem;
}
.fourTip{
	font-size: 0.13rem;
	line-height: 0.27rem;
	color: #272727;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
.fourTip img{
	width: 0.13rem;
	height: 0.13rem;
	vertical-align: bottom;
	margin: 0 0.05rem;
}
.fourWrap input{
	width: 0.9rem;
	height: 0.45rem;
	background: url("../images/name.png") no-repeat;
	background-size: cover;
	padding: 0 0.51rem 0 0.79rem;
	font-size: 0.16rem;
	font-style: italic;
	border: none;
    outline: none;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	color: #b89114;
	font-weight: bold;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
	color: #b89114;
	font-weight: bold;
}

input:-ms-input-placeholder{
	color: #b89114;
	font-weight: bold;
}

input::-webkit-input-placeholder{
	color: #b89114;
	font-weight: bold;
}
.fourList{
	font-size: 0.16rem;
	line-height: 0.2rem;
	color: #fff;
	font-style: italic;
	font-weight: bold;
	background: url("../images/fourQ3.png") no-repeat;
	background-size: cover;
	width: 3.33rem;
	height: 0.69rem;
	text-align: center;
	margin-bottom: 0.12rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.fourWrap .active{
	background: url("../images/fourQ2.png") no-repeat;
	background-size: cover;
}

/* 第七*/
.finalbo{
	margin-bottom: 0.15rem;
}
.finaltop{
	margin-bottom: 0.2rem;
}
/*第3*/
.threetip{
	font-size: 0.18rem;
	color: #292827;
	line-height: 0.2rem;
	font-style: italic;
}
.threebac{
	background: url('../images/threebac.png') no-repeat;
	background-size: cover;
	width: 3.12rem;
	height: 1.38rem;
	position: relative;
	margin-top: 0.1rem;
}
.threebac ul{
	font-size: 0.12rem;
	line-height: 0.18rem;
	color: #262626;
	margin-left: 0.2rem;
	font-style: italic;
	position: absolute;
	top: -0.12rem;
	text-align: center;
}
.threeP{
	background: #272727;
	font-size: 0.13rem;
	line-height: 0.24rem;
	color: #fec200;
	width: 2.23rem;
	margin: 0.06rem 0;
}
.threebac ul li:nth-child(1){
	margin-left: 0.25rem;
}
.threebac ul li:nth-child(3){
	width: 2.75rem;
}
.threebac ul li:nth-child(4){
	width: 2.71rem;
}
.threeBo{
	position: absolute;
	left: 0.84rem;
	bottom: -0.28rem;
	font-style: italic;
	color: #272727;
	text-align: center;
}
.threeBo p:nth-child(1){
	font-size: 0.25rem;
	line-height: 0.35rem;
}
.threeBo p:nth-child(2){
	font-size: 0.15rem;
}
.threeImg{
	margin-top: 0.22rem;
	text-align: center;
}
.threeImg img{
	width: 2.5rem;
}
.threewap{
	top: 2.2rem;
}
.cover{
	background-color: rgba(0,0,0,.7);
	width:100%;
	height:100%;
	position: fixed;
	right: 0;
	top:0;
	display: none;
}
.cover img{
	width: 3.225rem;
	position: absolute;
	right:0.1rem;
	top: 0.1rem;
}

.myMask{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0px;
	background: #000;
	opacity: 0.8;
	display: none;
}
#qrcode{
	width: 0.5rem;
	height: 0.5rem;
	position: absolute;
	left:2.75rem;
	top:4.3rem;
	z-index: 9;
}
#qrcode img{
	width:100%;
	height:100%;
}
.appBac{
	background: url('../images/appBac.png') no-repeat;
	width: 100%;
	height: 100%;
	background-size: cover;
	position: relative;
}
.appBac .banner{
	position: absolute;
	left: 0;
	top: 0.375rem;
	width:3.75rem;
	height: 1.86rem;
	overflow: hidden;
}
.appBac .banner img{
	width: 100%;
}
footer{
	position: absolute;
	width:3.75rem;
	left:0;
	bottom:0;
}
footer img{
	width:100%;
}
@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
.down{
    -moz-animation: bounce 2s infinite;
  	-webkit-animation: bounce 2s infinite;
  	animation: bounce 2s infinite;
}
.appMask{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background: #000;
	opacity: 0.7;
}
.appYD{
	width: 3.5rem;
	margin: 0.45rem auto;
	position: relative;
}
.appYD .dian_bg{
	width: 100%;
}
@keyframes hj {
  0%,100%{
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  60% {
    -moz-transform: translateY(0.1rem);
    -ms-transform: translateY(0.1rem);
    -webkit-transform: translateY(0.1rem);
    transform: translateY(0.1rem);
  }
}
.dianshou{
	width:0.4rem;
	position: absolute;
	left:1.54rem;
	top:0.85rem;
	-moz-animation: hj 1s infinite;
  	-webkit-animation: hj 1s infinite;
  	animation: hj 1s infinite;
}
.top_rem{
	top:1.75rem;
}
.img_wechat{
	position: absolute;
	right:0.11rem;
	top:3.01rem;
}
.img_wechat img{
	width:0.865rem;
	height:0.865rem;
	margin:0 auto;
}
.bg_fff{
	background-color: #fff;
	width:1.17rem;
	text-align: center;
}
.bg_fff p{
	font-size: 12px;
	color:#333;
}
@media only screen and (width: 375px) and (min-height: 690px){
	.bg{
    	background-size: contain;
    }
    .bg1{
    	background-size: contain;
    }
    .bg3{
    	background-size: contain;
    }
    .up_btn2{
    	top:5.23rem;
    }
    .up_btn3{
    	top:5.5rem;
    }
    .up_btn{
    	top:4.8rem;
    }
    .appBac{
    	background-color: #fff;
    	background-size: contain;
    }
}